<script>
export default {
  name: 'Trendtrend'
}
</script>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const { height } = defineProps(['height'])

const chart = ref()

const manNumer = 60

onMounted(() => {
  const myEcharts = echarts.init(chart.value)

  const option = {
    title: {
      text: '(访问量)',
      textStyle: {
        color: '#6892ce',
        fontSize: 13
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      top: 'center',
      right: 0,
      textStyle: {
        color: '#ffffff'
      }
    },
    yAxis: {
      axisLabel: {
        color: '#6892ce'
      },
      axisTick: {
        //y轴刻度线
        show: false
      },
      splitLine: {
        //网格
        show: false
      }
    },
    xAxis: {
      type: 'category',
      show: true,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: {
        color: '#6892ce'
      },
      splitLine: {
        //网格
        show: false
      },
      axisTick: {
        //刻度线
        show: true
      },
      axisPointer: {
        type: 'none'
      },
      boundaryGap: false
    },
    grid: {
      left: 50,
      right: 50,
      top: 30,
      bottom: 25
    },
    series: [
      {
        type: 'line',
        radius: ['40%', '100%'],
        avoidLabelOverlap: false,
        right: 100,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          // show: false,
          position: 'inside',
          color: '#ffffff',
          formatter: '{d}%'
        },
        data: [1567, 2348, 1787, 2478, 1245, 2313, 1232],
        smooth: true,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#76684e' // 100% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(0, 0, 0, 0)' //
              }
            ],
            global: false // 缺省为 false
          }
        },
        symbol: 'none'
      }
    ]
  }

  myEcharts.setOption(option)
})
</script>

<template>
  <div
    class="container"
    :style="{ height: isNaN(+height) ? height : height + 'px' }"
  >
    <div class="titleBox">
      <div class="title">
        未来30天游客量趋势图
        <div class="titleBg">&nbsp;</div>
      </div>
    </div>
    <div class="contentBox">
      <div
        class="chart"
        ref="chart"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  background: url(../../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  color: white;

  $boxHeight: 21%;
  .titleBox {
    position: relative;
    width: 100%;
    height: $boxHeight;

    .title {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 20px;

      .titleBg {
        margin-top: 10px;
        background: url(../../../images/dataScreen-title.png) no-repeat;
      }
    }
  }

  .contentBox {
    position: relative;
    width: 100%;
    height: calc(100% - $boxHeight);

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
